<template>
  <div class="echart echart7" style="width: 100%; height: 100%">
    <div class="enlarge" @click="openDialog">
      <i class="el-icon-full-screen" />
    </div>
    <div ref="echarts7" style="width: 100%; height: 100%"></div>
    <el-dialog
      custom-class="echart-dialog"
      :visible.sync="Dialog"
      :modal-append-to-body="false"
      :append-to-body="true"
      :destroy-on-close="true"
      :fullscreen="true"
    >
      <el-row type="flex" class="echart-content">
        <el-col :span="6">
          <el-table
            ref="table"
            class="enlarge-table"
            :data="tableData"
            @row-click="handleCurrentChange"
            highlight-current-row
          >
            <el-table-column prop="machineName" label="机器" min-width="40%">
              <template slot-scope="{ row }">
                {{ row.machineName ? row.machineName.split("温度").join("") : "" }}
              </template>
            </el-table-column>
            <el-table-column prop="temp" label="温度" min-width="30%" :formatter="fixedFloat"></el-table-column>
            <el-table-column prop="humidity" label="湿度" min-width="30%" :formatter="fixedFloat"></el-table-column>
          </el-table>
        </el-col>
        <el-col :span="18">
          <div class="echart-enlarge" ref="echarts7Large"></div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "echarts7",
  props: ["wsEchartsData"],
  data() {
    return {
      Dialog: false,
      echarts7: null,
      echarts7Large: null,
      tableData: []
    };
  },
  computed: {
    wenShiGroupState() {
      return this.$store.state.wenShiGroupState;
    },
    wenShiGroupStateList() {
      return this.$store.state.wenShiGroupStateList;
    },
    wsEchartsDataState() {
      return this.$store.state.wsEchartsDataState;
    }
  },
  watch: {
    wsEchartsDataState: {
      immediate: true,
      handler(val) {
        if (val) {
          this.$nextTick(() => {
            this.init(val);
            if (this.Dialog) {
              this.resetEchart();
            }
          });
        }
      }
    },
    wenShiGroupState: {
      immediate: true,
      handler(val) {
        if (val.code == 1) {
          let { data } = val;
          this.tableData = data;
          this.$store.dispatch("actWenShiGroupList", {
            machineNumber: data[0]["machineNumber"]
          });
        }
      }
    },
    wenShiGroupStateList: {
      immediate: true,
      handler(val) {
        if (val.code == 1) {
          let { data } = val;
          let time = [],
            temp = [],
            humidity = [];
          data.data.map((item) => {
            time.push(item.time);
            temp.push(parseFloat(item.temp).toFixed(1));
            humidity.push(parseFloat(item.humidity).toFixed(1));
          });
          var wsEchartsData = {
            name: data.id,
            date: time,
            wen: temp,
            shi: humidity
          };
          this.$store.dispatch("actWenShiData", wsEchartsData);
        }
      }
    }
  },

  mounted() {
    this.echarts7 = this.$echarts.init(this.$refs.echarts7);
    this.echarts7.showLoading({
      color: "#ffffff",
      textColor: "#ffffff",
      maskColor: "rgba(255,255,255,0)"
    });
  },
  methods: {
    init(data) {
      let option = this.setOption(data);
      this.echarts7.setOption(option);
      this.echarts7.hideLoading();
      var _this = this;
      window.addEventListener("resize", function() {
        _this.echarts7.resize();
      });
    },
    setOption(data) {
      var option = {
        tooltip: {
          trigger: "axis",
          padding: 10,
          backgroundColor: "rgba(50,50,50,0.7)",
          borderColor: "#333",
          textStyle: {
            fontSize: 12,
            color: "#fff",
            lineHeight: 25
          },
          axisPointer: {
            type: "shadow"
          },
          formatter: function(params) {
            let str = "<span>机器：" + data.name + "</span><span> 时间：" + params[0].axisValueLabel + "</span></br>";
            params.forEach((item) => {
              str +=
                '<span style="display:inline-block;margin-right:5px;width:10px;height:10px;left:5px;background-color:' +
                item.color +
                '"></span>' +
                item.seriesName +
                " : <span class='number'>" +
                item.value +
                "</span></br>";
            });

            return str;
          }
        },
        legend: {
          data: ["温度", "湿度"],
          textStyle: {
            fontSize: 12,
            color: "#FFFFFF"
          }
        },
        color: ["#F9565D", "#56ABFA"],

        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "15%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: data.date,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 10,
              color: "#316B84"
            }
          }
        },
        yAxis: {
          type: "value",
          max: 100,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 10,
              color: "#316B84"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#316B84",
              type: "dashed",
              width: 1
            }
          }
        },
        series: [
          {
            name: "温度",
            type: "line",

            data: data.wen,
            label: {
              show: false,
              position: "top",
              textStyle: {
                fontSize: 10,
                color: "#fff",
                fontFamily: "electronicFont"
              }
            }
          },
          {
            name: "湿度",
            type: "line",

            label: {
              textStyle: {
                fontSize: 10,
                color: "#fff",
                fontFamily: "electronicFont"
              },
              show: false,
              position: "top"
            },
            data: data.shi
          }
        ]
      };
      return option;
    },
    setLargeOption(data) {
      var option = {
        tooltip: {
          trigger: "axis",
          padding: 10,
          backgroundColor: "rgba(50,50,50,0.7)",
          borderColor: "#333",
          textStyle: {
            fontSize: 16,
            color: "#fff",
            lineHeight: 25
          },
          axisPointer: {
            type: "shadow"
          },
          formatter: function(params) {
            let str = "<span>机器：" + data.name + "</span><span> 时间：" + params[0].axisValueLabel + "</span></br>";
            params.forEach((item) => {
              str +=
                '<span style="display:inline-block;margin-right:5px;width:10px;height:10px;left:5px;background-color:' +
                item.color +
                '"></span>' +
                item.seriesName +
                " : <span class='number' style='font-size:20px'>" +
                item.value +
                "</span></br>";
            });

            return str;
          }
        },
        legend: {
          data: ["温度", "湿度"],
          textStyle: {
            fontSize: 16,
            color: "#FFFFFF"
          }
        },
        color: ["#F9565D", "#56ABFA"],

        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "15%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: data.date,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 16,
              color: "#fff"
            }
          }
        },
        yAxis: {
          type: "value",
          max: 100,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 16,
              color: "#fff"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#316B84",
              type: "dashed",
              width: 1
            }
          }
        },
        series: [
          {
            name: "温度",
            type: "line",

            data: data.wen,
            label: {
              show: false,
              position: "top",
              textStyle: {
                fontSize: 16,
                color: "#fff",
                fontFamily: "electronicFont"
              }
            }
          },
          {
            name: "湿度",
            type: "line",

            label: {
              textStyle: {
                fontSize: 16,
                color: "#fff",
                fontFamily: "electronicFont"
              },
              show: false,
              position: "top"
            },
            data: data.shi
          }
        ]
      };
      return option;
    },
    openDialog() {
      let option = this.setLargeOption(this.wsEchartsDataState);
      this.Dialog = true;
      setTimeout(() => {
        this.$nextTick(() => {
          this.$refs["table"].setCurrentRow(this.wenShiGroupState.data[0]);
          this.$store.dispatch("actWenShiGroupList", {
            machineNumber: this.wenShiGroupState.data[0]["machineNumber"]
          });
          this.echarts7Large = this.$echarts.init(this.$refs.echarts7Large);
          this.echarts7Large.setOption(option);
          var _this = this;
          window.addEventListener("resize", function() {
            _this.echarts7Large.resize();
          });
        });
      });
    },
    resetEchart() {
      let option = this.setLargeOption(this.wsEchartsDataState);
      setTimeout(() => {
        this.$nextTick(() => {
          this.echarts7Large = this.$echarts.init(this.$refs.echarts7Large);
          this.echarts7Large.setOption(option);
          var _this = this;
          window.addEventListener("resize", function() {
            _this.echarts7Large.resize();
          });
        });
      });
    },
    fixedFloat(row, col, value) {
      value = parseFloat(value);
      return value.toFixed(1);
    },
    handleCurrentChange(val) {
      this.$store.dispatch("actWenShiGroupList", {
        machineNumber: val["machineNumber"]
      });
    }
  }
};
</script>

<style lang="scss">
.echart.echart7 .enlarge {
  position: absolute;
  top: 0;
  right: 0;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  z-index: 1000;
}
.echart-dialog.el-dialog {
  height: 100vh;
  background: rgb(26, 35, 45, 0.79);
  border: 3px solid #52abb1;
  margin: 0 auto;
  .el-dialog__headerbtn {
    top: 3%;
  }
  .echart-content {
    height: 70vh;
  }
  .enlarge-table.el-table {
    height: auto !important;
    overflow-y: auto;
    .el-table__body tr.current-row > td {
      background: rgb(0, 36, 81, 0.7) !important;
    }
  }
  .echart-enlarge {
    width: 100%;
    height: 100%;
  }
}
</style>
